import React from 'react';
import "./index.less"
import {
  List,
  Picker,
  DatePicker
} from 'antd-mobile';
import TopBarExample from 'components/topBar'
const Item = List.Item;
const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
const mintime =new Date(1950, 1, 1, 0, 0, 0)
export default class OrderDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: 0,
      shopCar: false,
      data: [{value:'1',label:'男'},{value:'2',label:'女'}],
      cols: 1,
      asyncValue: [],
      date:now
    }
  }
  componentDidMount() {
    this.props.location.state ? this.setState({
      id: this.props.location.state.id,
      shopCar: this.props.location.state.shopCar
    }) : null
  }


  // 返回上一页
  addVConsolePackage = () => {
    this.props.history.goBack()
  };
  onPickerChange = (val) => {
    console.log(val);
    let colNum = 1;
    const d = [...this.state.data];
    const asyncValue = [...val];
    console.log(d);
    this.setState({
      data: d,
      cols: colNum,
      asyncValue,
    });
  };



  render() {
    // const { getFieldProps } = this.props.form;
    return (
      <div className="setTing">
        <TopBarExample title={'用户信息'} autoBack={this.addVConsolePackage} showBack={true}></TopBarExample>
        <List renderHeader={() => 'Customized Right Side（Empty Content / Text / Image）'} className="my-list">
          <Item extra={<img src="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"></img>} arrow="horizontal" onClick={() => { }}>头像</Item>
          <Item extra='阿萨达' arrow="horizontal" onClick={() => { }}>昵称</Item>
          <Item extra='阿萨达' arrow="horizontal" onClick={() => { }}>出生日期</Item>
          <Picker
            data={this.state.data}
            cols={this.state.cols}
            value={this.state.asyncValue}
            onPickerChange={this.onPickerChange}
            onOk={v => console.log(v)}
          >
            <List.Item arrow="horizontal" onClick={this.onClick}>性别</List.Item>
          </Picker>
          <DatePicker
          mode="date"
          title="出生日期"
          extra="Optional"
          value={this.state.date}
          maxDate={now}
          minDate={mintime}
          onChange={date => this.setState({ date })}
        >
          <List.Item arrow="horizontal">出生日期</List.Item>
        </DatePicker>
        </List>

      </div>
    );
  }
}

